import React from 'react';
import "./styles/Header.css"
import { useNavigate } from 'react-router-dom';
import LogoutIcon from '@mui/icons-material/Logout';
import SettingsIcon from '@mui/icons-material/Settings';

const Header = () => {

    let navigate = useNavigate();

    const logOut = () => {
      localStorage.removeItem("accessToken")
      navigate("/login")
    }
  return (
    <div className="header">
      <div className="left" style={{width: 110}}>
      </div>
      <div className="center">
        <img width={150} src="http://localhost:3000/logo.png" alt="Logo" 
        onClick={() => { navigate('/chat')}} 
        />
      </div>
      <div className="right">
        <button 
        onClick={logOut}
        >
        <LogoutIcon/>
            Выход
            </button>
      </div>
    </div>
  );
}

export default Header;
